<template>
    <div class="sdy-orderaddress">
        <sdyHeader title="啥都有 - 订单" back></sdyHeader>
            <van-form @submit="onSubmit">
                <van-cell-group inset>
                    <van-field
                    v-model="username"
                    name="姓名"
                    label="姓名"
                    placeholder="姓名"
                    />
                    <van-field
                    v-model="phone"
                    name="手机号"
                    label="手机号"
                    placeholder="手机号"
                    />
                </van-cell-group>
                <van-field
                    v-model="city"
                    is-link
                    readonly
                    name="picker"
                    placeholder="点击选择城市"
                    @click="showPicker = true"
                />
                <van-popup v-model:show="showPicker" position="bottom">
    
                <van-area 
                class="areaList" 
                title="标题" 
                @confirm="onConfirm"
                @cancel="showPicker = false"
                :area-list="areaList" />
                </van-popup>
                <van-cell-group inset> 
                    <van-field
                    v-model="address"
                    name="详细地址"
                    label="详细地址"
                    placeholder="详细地址"
                    :rules="[{ required: true, message: '请填写详细地址' }]"
                    />
                </van-cell-group>
                <div style="margin: 16px;">
                    <van-button round block type="primary" native-type="submit">
                    提交
                    </van-button>
                </div>
                </van-form>
        
                <SdyOrderInfo v-if="showInfo" @finish="orderFinishHandler" :info="info" ></SdyOrderInfo>
                <SdyOrderList v-if="showList" ></SdyOrderList>
    </div>
</template>

<script setup lang="ts">
import {getOrderApi} from '@/api/order'
import { onMounted ,ref } from 'vue'
import { areaList } from '@vant/area-data';
import {orderAddressApi } from '@/api/order'
import SdyOrderInfo from './components/SdyOrderInfo.vue'
import SdyOrderList from './components/SdyOrderList.vue'


//准备表单需要的数据
const username = ref<string>('')
const phone = ref<string>('')
const address =ref<string>('')
const city = ref<string>('')
const showPicker =ref<boolean>(false)
const showInfo = ref<boolean>(false)
const showList = ref<boolean>(false)


// 准备一个 信息
const  info = ref()


//提交
const onSubmit =async () =>{

//准备数据
info.value = {
    userid: window.localStorage.getItem('user_id') as string,
    name: username.value, 
    tel: phone.value,
    province: city.value.split('/')[0],
    city: city.value.split('/')[1],
    county: city.value.split('/')[2],
    addressDetail: address.value,
    time: window.localStorage.getItem('time') as  string

}

    const res = await orderAddressApi(info.value)
    console.log(res)

    // 把订单的信息 展示出去
    showInfo.value = true
}
 

//确认选择 
const onConfirm = (info:{name:string,value: string }[]) =>{
    console.log(info)

    // 把得到 的内容  组装成一个 完整的字符串
     const str = info.reduce((prev, item) =>{
        return prev + '/' + item.name
     },'').slice(1)

     // 把 补充好的 内容 放在 city 信息内
     city.value = str
     //关闭 对话框
     showPicker.value = false
}






// 确认订单成功
const orderFinishHandler = () => {
  showInfo.value = false
  showList.value = true
}

</script>

<style scoped lang="scss">
.sdy-order{


    .areaList{
        height: 300px;
    }
}

</style> 